<!--  -->
<template>
  <div class="main-content systemLog">
    <div class="titleTextBox">
      <div class="titleText">
        <i class="iconfont iconliebiao"></i>
        <span class="text">数据信息</span>
      </div>
    </div>
    <!-- 筛选 -->
    <div class="date-screen-box">
      <el-form>
        <el-form-item label="日期">
          <el-date-picker
            v-model="headDate"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>

    <!-- 头部数据 -->
    <div class="header-main-data">
      <div class="main-item">
        <div class="header">
          <div class="item-left">
            <div class="num">88<span class="unit">人</span></div>
          </div>
          <div class="item-right">
            <i class="iconfont iconliebiao"></i>
          </div>
        </div>
        <div class="footer">
          <div class="left-title">活跃用户数</div>
          <div class="right-contrast">
            环比 0.09%<i class="iconfont iconjiantoushang"></i>
          </div>
        </div>
      </div>

      <div class="main-item">
        <div class="header">
          <div class="item-left">
            <div class="num">5<span class="unit">个</span></div>
          </div>
          <div class="item-right">
            <i class="iconfont iconliebiao"></i>
          </div>
        </div>
        <div class="footer">
          <div class="left-title">活跃企业</div>
          <div class="right-contrast">
            占比 50.0%<i class="iconfont iconjiantoushang"></i>
          </div>
        </div>
      </div>

      <div class="main-item">
        <div class="header">
          <div class="item-left">
            <div class="num">1150<span class="unit">次</span></div>
          </div>
          <div class="item-right">
            <i class="iconfont iconliebiao"></i>
          </div>
        </div>
        <div class="footer">
          <div class="left-title">累积访问次数</div>
          <div class="right-contrast">
            环比 0.09%<i class="iconfont iconjiantouxia"></i>
          </div>
        </div>
      </div>

      <div class="main-item">
        <div class="header">
          <div class="item-left">
            <div class="num">2<span class="unit">个</span></div>
          </div>
          <div class="item-right">
            <i class="iconfont iconliebiao"></i>
          </div>
        </div>
        <div class="footer">
          <div class="left-title">新增企业</div>
          <div class="right-contrast">
            环比 50.0%<i class="iconfont iconjiantoushang"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 用户操作日志 -->
    <div class="user-log-box">
      <div class="titleTextBox">
        <div class="titleText">
          <i class="iconfont iconliebiao"></i>
          <span class="text">用户操作日志</span>
        </div>
        <el-button type="text">导出</el-button>
      </div>

      <div class="log-table-box">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{
            color: '#000',
            fontSize: '14px',
            backgroundColor: '#f8f8f8',
          }"
          :row-style="{
            borderRadius: '20px',
          }"
        >
          <el-table-column prop="date" label="操作时间"> </el-table-column>
          <el-table-column prop="account" label="操作帐号"> </el-table-column>
          <el-table-column prop="type" label="操作内容"> </el-table-column>
          <el-table-column prop="ip" label="IP地址"> </el-table-column>
          <el-table-column prop="browser" label="操作浏览器"> </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 各类数据KPI -->
    <div class="data-kpi-box">
      <div class="titleTextBox">
        <div class="titleText">
          <i class="iconfont iconliebiao"></i>
          <span class="text">各类数据KPI</span>
        </div>
      </div>
      <div class="data-kpi-list">
        <el-card class="data-kpi-item">
          <div slot="header" class="data-kpi-header clearfix">
            <span>栏目使用情况</span>
            <el-date-picker
              v-model="columnDate"
              type="date"
              placeholder="选择日期"
              style="float: right;"
            >
            </el-date-picker>
          </div>
          <div class="kpi-box">
            <div class="kpi"></div>
          </div>
        </el-card>
        <el-card class="data-kpi-item">
          <div slot="header" class="data-kpi-header clearfix">
            <span>页面使用情况</span>
            <el-date-picker
              v-model="pageDate"
              type="date"
              placeholder="选择日期"
              style="float: right;"
            >
            </el-date-picker>
          </div>
          <div class="kpi-box">
            <div class="kpi"></div>
          </div>
        </el-card>
        <el-card class="data-kpi-item">
          <div slot="header" class="data-kpi-header clearfix">
            <span>访问量趋势</span>
            <el-date-picker
              v-model="trafficDate"
              type="date"
              placeholder="选择日期"
              style="float: right;"
            >
            </el-date-picker>
          </div>
          <div class="kpi-box">
            <div class="kpi"></div>
          </div>
        </el-card>
        <el-card class="data-kpi-item">
          <div slot="header" class="data-kpi-header clearfix">
            <span>用户浏览器分布</span>
            <el-date-picker
              v-model="browserDate"
              type="date"
              placeholder="选择日期"
              style="float: right;"
            >
            </el-date-picker>
          </div>
          <div class="kpi-box">
            <div class="kpi"></div>
          </div>
        </el-card>
        <el-card class="data-kpi-item">
          <div slot="header" class="data-kpi-header clearfix">
            <span>用户操作系统分布</span>
            <el-date-picker
              v-model="systemDate"
              type="date"
              placeholder="选择日期"
              style="float: right;"
            >
            </el-date-picker>
          </div>
          <div class="kpi-box">
            <div class="kpi"></div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      headDate: "",
      tableData: [
        {
          date: "2016-05-01 12:02:20",
          account: "admin",
          type: "登陆",
          ip: "127.0.0.1",
          browser: "Chrome",
        },
        {
          date: "2016-05-01 12:02:20",
          account: "admin",
          type: "登陆",
          ip: "127.0.0.1",
          browser: "Chrome",
        },
        {
          date: "2016-05-01 12:02:20",
          account: "admin",
          type: "登陆",
          ip: "127.0.0.1",
          browser: "Chrome",
        },
        {
          date: "2016-05-01 12:02:20",
          account: "admin",
          type: "登陆",
          ip: "127.0.0.1",
          browser: "Chrome",
        },
      ],
      currentPage: 1,
      columnDate: "", // 栏目使用情况
    pageDate: "", // 页面使用情况
    trafficDate: "", // 访问量趋势
    browserDate: "", // 用户浏览器分布
    systemDate: "", // 用户操作系统分布
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    // 分页插件方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style lang="less" scoped>
.systemLog {
  .titleTextBox {
    .titleTextBox();
  }
  .date-screen-box {
    margin-top: 15px;
  }
  .header-main-data {
    .alignCenter();
    margin-top: 15px;
    .main-item {
      flex: 1;
      height: 140px;
      background: cornsilk;
      margin-left: 15px;
      padding: 10px 15px;
      box-sizing: border-box;
      border-radius: 4px;
      color: @color-white;
      .shadow();
      .alignCenter(flex, unset, space-between, column);
      &:first-child {
        margin-left: 0;
      }
      &:nth-child(1) {
        background: linear-gradient(to left, #00bff3, #006dc4);
      }
      &:nth-child(2) {
        background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
      }
      &:nth-child(3) {
        background-image: linear-gradient(to left, #667eea 0%, #764ba2 100%);
      }
      &:nth-child(4) {
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(0, 0, 0, 0.15) 100%
          ),
          radial-gradient(
              at top center,
              rgba(255, 255, 255, 0.4) 0%,
              rgba(0, 0, 0, 0.4) 120%
            )
            #989898;
        background-blend-mode: multiply, multiply;
      }
      .header {
        height: 70%;
        .alignCenter(flex, center, unset);
        .item-left {
          flex: 1;
          .alignCenter(flex, flex-end, unset);
          letter-spacing: 1px;
          .num {
            font-size: 42px;
            font-weight: 600;
            .unit {
              font-size: 13px;
              font-weight: normal;
              margin-left: 5px;
            }
          }
        }
        .item-right {
          width: 60px;
          flex: 0 0 60px;
          .iconfont {
            font-size: 50px;
          }
        }
      }
      .footer {
        font-size: 13px;
        .alignCenter(flex, center, space-between);
        margin-bottom: 5px;
        .left-title {
          color: @background-color-gray;
        }
        .right-contrast {
          .alignCenter();
          .iconfont {
            font-size: 14px;
            color: @color-text-regular;
            margin-left: 3px;
            &.iconjiantoushang {
              color: @color-success;
            }
            &.iconjiantouxia {
              color: @color-danger;
            }
          }
        }
      }
    }
  }
  .user-log-box {
    margin-top: 15px;
    .log-table-box {
      margin-top: 10px;
    }
  }
  .data-kpi-box {
    margin-top: 15px;
    .data-kpi-list {
      .alignCenter();
      flex-wrap: wrap;
      .data-kpi-item {
        width: 49%;
        margin-left: 2%;
        margin-top: 15px;
        &:nth-child(2n + 1) {
          margin-left: 0;
        }
        .data-kpi-header {
            span{
                line-height: 40px;
            }
          .date-picker-box {
            width: 150px;
          }
        }
        .kpi-box{
            .kpi{
                width: 100%;
                height: 200px;
                background: mediumaquamarine;
            }
        }
      }
    }
  }
}
</style>
